<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" user-scalable=no" >
    <title>管理微圈</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script src="/ztree/js/jquery.ztree.all.min.js"></script>
    <link rel="stylesheet" href="/css/MicroCircle/seeMicroCircle.css"/>
</head>
<style>

</style>
<body>
<div class="layui-container">
    <div class="layui-row" id="row_1">
        <div id="div_id1">
            <span id="spanID">管理微圈</span>
            <button onclick="refresh()" class="layui-btn" id="btn_1"><i class="layui-icon">&#xe669;</i>刷新</button>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
            <div id="div_id2">
                <div id="div_id3">
                    <img id="headerImage" src="" style="width: 100%;height: 100%;"  alt="" />
                </div>
                <p class="p_class1" id="p_name"></p>
            </div>

            <div class="div_class1">
                <p class="p_class2">标题:<span class="span_class1" id="span_title">java</span></p>
                <p class="p_class3">创作人:<span id="span_user">管理员</span></p>
                <p class="p_class3">分类:<span id="span_fenlei">20190810</span></p>
                <p class="p_class3">日期:<span id="span_date">110</span></p>
                <p class="p_class3">账号:<span id="span_id">root</span></p>
            </div>
        </div>
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9" id="div_id5">
            <div class="layui-row">
                <h1 id="titleid">标题</h1>
                <div class="text_div" id="text_id">

                </div>
                <div id="img_id">
                    <img id="artcleUrl" src="" style='width: 100%; display: none;'>
                </div>
            </div>


            <div class="layui-row" id="div_id6">
                <input type="hidden" name="forumId" id="forumId">
                <div id="tab_id">
                    <table id="demo" lay-filter="test"></table>
                </div>

            </div>

            <div class="layui-row" id="div_id7" >
                <div  class="div_class2">
                    <i class="layui-icon">&#xe63a;</i>
                    回复评论及需修改内容
                </div>

                <div class="div_class3">
                    <p  class="p_class4">用户名:
                        <input class="layui-input" name="userName" readonly="readonly" id="input_id">
                    </p>
                    <p  class="p_class5">账号:
                        <input class="layui-input" name="userNum" readonly="readonly" id="input_id1">
                    </p>
                    <p id="p_div1">
                        回复评论:
                        <textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="text_div1" style="height: 30px;"></textarea>
                    </p>

                    <div class="btndiv">
                        <button class="layui-btn" id="btn_2" onclick="sub()">确定</button>
                    </div>
                </div>

                <div class="layui-row">
                    <div  class="commentdiv">
                        <i class="layui-icon">&#xe611;</i>
                        全部评论
                    </div>
                    <div id="comment_id">
                        <div class="contentdiv">
                            <div id="bottomComment">
                                <div> 没有更多的评论了</div>
                            </div>
                        </div>
                    </div>
                    <div id="div_a">
                        <a id="comment_a"> 查看更多评论</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <input name="microcircleId" class="layui-input" type="text" id="microcircleId" style="display: none;"/>
</div>
    <!--<script src="/js/MicroCircle/seeMicroCircle.html.js"></script>-->
    <script>
        var form;
        var $;
        var table;
        var layer;
        var upload;
        var element;
        var node;
        var user = JSON.parse(localStorage.getItem("user"));
        var userId = user.userId;

        var data = [];
        var microCircleData =  JSON.parse(localStorage.getItem("microCircleData"));
        $("input[name=microcircleId]").val(microCircleData.microcircleId);
        data.push(microCircleData);

        $(document).click(function(){//子页面
            $(".rightmenu",window.parent.document).hide();
        });

        layui.use(['form','jquery','table','layer','upload'],function() {
            form = layui.form;
            $ = layui.jquery;
            table = layui.table;
            layer = layui.layer;
            upload = layui.upload;
            element = layui.element;

            //展示点赞等数量
            showNums(data);

            //展示微圈评论
            showMicroCircleComment(microCircleData.microcircleId);
        });

        function showNums(data) {
            table.render({
                elem:"#demo",
                data:data,
                width:500,
                cols:[[
                    {field:'acticleHits',title:'查看量'},
                    {field:'acticleLike',title:'点赞量'},
                    {field:'acticleShare',title:'分享量'},
                    {field:'articleHits',title:'收藏量',templet:function (data) {
                            var collectionNum = 0
                            $.ajax({
                                url:'/microcircle/getCollectionNum',
                                type: "post",
                                dataType:'json',
                                async: false,
                                data: {"microcircleId": data.microcircleId },
                                success:function (data) {
                                    if (data.data != null){
                                        collectionNum = data.data;
                                    } else{
                                        collectionNum = 0;
                                    }
                                }
                            });
                            return collectionNum;
                        }}
                ]]
            })
        }

        function showMicroCircleComment(microcircleId) {
            $.ajax({
                url: "/microcircle/getMicroCircleComment",
                type: "post",
                dataType: "json",
                data: {"commodityId": microcircleId},
                success: function (data) {
                    var html = "";
                    var data = data.data;
                    if (data != ''){
                        for (var i = 0; i < data.length; i++){
                            if (data[i].userType == "1"){
                                data[i].userName = data[i].nickName;
                                data[i].imgUrl = data[i].avatarUrl;
                            }
                            if (data[i].userType == "2"){
                                data[i].userName = data[i].trueName;
                                data[i].imgUrl = data[i].acatarUrl;
                            }
                            if (data[i].display == "2") {
                                data[i].yinStatu = "隐藏";
                            }
                            if (data[i].display == "3") {
                                data[i].yinStatu = "显示";
                            }
                            if (data[i].status == "3") {
                                data[i].delStatu = "已删除";
                            }
                            if (data[i].status == "1") {
                                data[i].delStatu = "删除";
                            }
                        }
                        for(var a = 0; a < data.length; a++){
                            if (data[a].status == "1") {
                                html+=
                                    "<div class='contentdiv'>" +
                                    "<div class='contentdiv1'>" +
                                    "<img id='imgId2' src='"+ data[a].imgUrl +"'>" +
                                    "</div>" +
                                    "<div class='singlediv'>" +
                                    "<p class='nameclass'>"+ data[a].userName +"</p>" +
                                    "<p class='contentclass'>回复网友:<span>"+ data[a].content +"</span></p>" +
                                    "<input name='userId' style='display: none;' value='" + data[a].userId + "'>" +
                                    "<p class='timeclass'>"+ data[a].commentDate+"</p>" +
                                    "<div class='btnTwo'>" +
                                    "<a class='a_class' href='javascript:;hideComment(\""+ data[a].id +"\",\""+ data[a].display+"\")'>"+ data[a].yinStatu +"</a>&nbsp" +
                                    "<a class='a_class2' href='javascript:delectComment(\""+ data[a].id +"\")')'>"+ data[a].delStatu +"</a>" +
                                    "</div>" +
                                    "</div>" +
                                    "</div>";
                            }else if (data[a].status == "3") {
                                html+=
                                    "<div class='contentdiv'>" +
                                    "<div class='contentdiv1'>" +
                                    "<img id='imgId2' src='"+ data[a].imgUrl +"'>" +
                                    "</div>" +
                                    "<div class='singlediv'>" +
                                    "<p class='nameclass'>"+ data[a].userName +"</p>" +
                                    "<p class='contentclass'>回复网友:<span>"+ data[a].content +"</span></p>" +
                                    "<input name='userId' style='display: none;' value='" + data[a].userId + "'>" +
                                    "<p class='timeclass'>"+ data[a].commentDate+"</p>" +
                                    "<div class='btnTwo'>" +
                                    "<a class='a_class2' href='javascript:delectComment(\""+ data[a].id +"\")')'>"+ data[a].delStatu +"</a>" +
                                    "</div>" +
                                    "</div>" +
                                    "</div>";
                            }
                        }
                        $("#comment_id").html(html);
                    }else{
                        $("#div_a").css("display","none");
                    }
                    element.init();

                    $(".contentdiv .singlediv input").each(function () {
                        if ($(this).val() == userId){
                            $(this).siblings(".contentclass").children("span").css({"color":"#44AFFF","font-weight":"600","font-size":"16px"});
                        }
                    });
                }
            });
        }

        //隐藏评论
        function hideComment(id,display) {
            if (display == "2"){
                display = "3";
            } else if (display == "3"){
                display = "2";
            }
            $.ajax({
                url: "/microcircle/hideComment",
                type: "post",
                dataType: "json",
                data: {"id": id,"display": display},
                success: function (data) {
                    if (data.data){
                        //addLog(3,4,'隐藏微圈');
                        showMicroCircleComment(microCircleData.microcircleId);
                    }
                }
            });
        }

        //删除评论
        function delectComment(id) {
            $.ajax({
                url: "/microcircle/delComment",
                type: "post",
                dataType: "json",
                data: {"id": id},
                success: function (data) {
                    if (data.data){
                        //addLog(3,4,'删除微圈');
                        showMicroCircleComment(microCircleData.microcircleId);
                    }
                }
            });
        }

        //添加操作日志
        function addLog(logType,type,remark) {
            var user = JSON.parse(localStorage.getItem("user"));
            var userId = user.userId;
            $.ajax({
                url: "/microcircle/addLog",
                dataType: "json",
                type: "post",
                data: {"logType":logType,"type":type,"userId":userId,"remark":remark},
                success: function (data) {

                }
            });
        }

        //确定
        function sub() {
            var commodityId = $("input[name=microcircleId]").val();
            var content = $("#text_div1").val();
            if (content == ''){
                layer.msg("请输入内容");
                return true;
            }
            var data = {
                userId: userId,
                commodityId: commodityId,
                content: content,
                createId: userId,
                updateId: userId,
            }
            $.ajax({
                url: "/microcircle/addMicroCircleComment",
                type: "post",
                dataType: "json",
                data: data,
                success: function (data) {
                    if (data.data){
                        showMicroCircleComment(microCircleData.microcircleId);
                        layer.msg("添加成功");
                    }
                }
            });
        }

        //刷新
        function refresh() {
            window.location.reload();
        }

    </script>
</body>
</html>